<template>
	<div class="newsinfo-container">
		<!-- 大标题 -->
		<h3 class="title">{{ newsinfo.authors }}</h3>
		<!-- 子标题 -->         
		<p class="subtitle">
			<span>发表时间：{{ newsinfo.title }}</span>
			<span>点击：{{ newsinfo.title }}次</span>
		</p>

		<hr>
		<!-- 内容区域 -->
		<div class="content">{{ newsinfo.content }}</div>
		<!-- 评论子组件区域 -->
		<comment-box></comment-box>
	</div>
</template>

<script>

	import {Toast} from 'mint-ui'

	//导入 评论子组件
	import comment from './../subcomponents/comment.vue'

	export default {
		data(){
			return{
				//将 URL 地址中传递过来的 ID 值，挂在到 data 上，方便以后调用
				id: this.$route.params.author,
				newsinfo:{} //新闻对象
			}
		},
		created(){
			this.getNewsInfo();
		},
		methods:{
			getNewsInfo(){
				this.$http.get('https://api.apiopen.top/getSongPoetry').then(result => {
					//console.log(result);
					if (result.body.code = 200) {
						this.newsinfo = result.body.result[0];
						//console.log(this.newsinfo);
					}else {
						Toast('获取新闻失败！')
					}
				});
			}
		},
		components:{
			//用来注册子组件的节点
			"comment-box": comment
		}
	}
	
</script>

<style lang="scss" scoped>

.newsinfo-container{
	padding: 0 4px;
	.title{
		font-size: 16px;
		text-align: center;
		margin: 15px 0;
		color: red;
	}
	.subtitle{
		font-size: 13px;
		color: #226aff;
		//设置子组件两端对齐
		display: flex;
		justify-content: space-between;
	}
	.content{
		img{
			width: 100%;
		}
	}
}
	
</style>